import { TableColumn } from "element-plus/lib/components/table/src/table-column/defaults.js";
import { BuildTaskResult } from "../../model";

export const chartTypeOption: Array<{
  value: "bar" | "line";
  label: string;
}> = [
  {
    value: "line",
    label: "折线图",
  },
  {
    value: "bar",
    label: "柱状图",
  },
];

export const timeStatsOption: Array<{
  value: keyof BuildTaskResult["timeStats"];
  label: string;
}> = [
  {
    value: "total",
    label: "总耗时",
  },
  {
    value: "loaded",
    label: "加载耗时",
  },
  {
    value: "compiled",
    label: "编译耗时",
  },
];

export const defaultOption = {
  title: {
    show: false,
    text: "构建任务结果比较",
    textStyle: {
      fontSize: 16,
    },
  },
  tooltip: {
    trigger: "axis",

    formatter: (params: any[]) => {
      let rslt = `<h4 style="margin:0 0 10px;padding:0">第${params[0].name}次</h4>`;
      for (let item of params) {
        rslt += `<div style="display:flex;align-items:center">${
          item.marker
        } <label style="flex:1;margin:0 10px;font-weight:600">${
          item.seriesName
        }</label> ${(item.value as Number).toFixed(1)} ms </div>`;
      }
      return rslt;
    },
  },
  legend: {
    top: 10,
    type: "scroll",
  },
  grid: {
    containLabel: true,
    left: 10,
    right: 110,
    bottom: 10,
    top: 60,
  },
  dataZoom: [
    {
      type: "slider", // 添加滑动条
    },
  ],
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
    axisLabel: {
      formatter: "{value} ms",
    },
  },
  series: [],
};

export type TableDataItem = {
  name: string;
  max: number;
  min: number;
  avg: number;
  total: number;
  rest: number;
};

export const columns: {
  prop: keyof TableDataItem;
  label: string;
  minWidth?: string;
  sortable?: boolean;
  render?: (val: string | number) => string;
}[] = [
  {
    prop: "name",
    label: "任务类型",
    minWidth: "160px",
  },
  {
    prop: "avg",
    label: "平均耗时",
    sortable: true,
    render: (v) => v + " ms",
  },
  {
    prop: "max",
    label: "最大耗时",
    sortable: true,
    render: (v) => v + " ms",
  },
  {
    prop: "min",
    label: "最小耗时",
    sortable: true,
    render: (v) => v + " ms",
  },
  {
    prop: "rest",
    label: "剩余",
  },
  {
    prop: "total",
    label: "总计",
  },
];
